<script>
import { requestGet, requestPost } from '@/api/system/common'
import nothing from '@/assets/images/usucces.png'
import TemplateNew from '@/template/index.vue'
import MenuTempAdd from '@/views/portal4.0/livebos/component/item/MenuTempAdd.vue'

export default {
  name: 'ColumnItem',
  components: { TemplateNew, MenuTempAdd },
  props: {
    lid: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      temp: null, // 模版绑定信息
      isShow: false, // 是否显示模版
      nothing: nothing
    }
  },
  created() {
    this.initSetting()
  },
  methods: {
    initSetting() {
      requestGet('rest/api/sys/livebos/v1/setting/template/columns',
        { cid: this.lid }).then(res => {
        const { data } = res
        if (data !== undefined && data !== null) {
          this.temp = data
          this.isShow = true
        } else {
          this.isShow = false
        }
      }).catch(() => {
        this.temp = null
        this.isShow = false
      })
    },
    addTemplate() {
      this.$refs.addTmp.initObject(this.temp)
    },
    addColumn() {
      this.$emit('addColumn')
    },
    delColumn() {
      this.$confirm('此操作将永久删除该模版, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(this.lid)
      }).catch(() => {
        this.$message.success('取消删除成功！')
      })
    },
    doDelete(id) {
      const data = [id]
      requestPost('rest/api/sys/livebos/v1/column/del', data).then(() => {
        this.$message.success('删除成功！')
        this.$emit('update-data')
      }).catch(() => {
        this.$message.error('删除失败！')
      })
    },
    updateObject(data) {
      const value = Object.assign(data)
      value.dataId = data.data.id
      value.columnId = this.lid
      requestPost('rest/api/sys/livebos/v1/setting/save/entity', value).then(() => {
        this.$message.success('更新成功！')
        this.$emit('update-data')
      }).catch(() => {
        this.$message.error('更新失败！')
      })
    }
  }
}
</script>

<template>
  <div class="live-bos-item">
    <!--  操作栏开始 -->
    <div class="custom-setting-button">
      <div class="setting-buttons" @click="addTemplate">
        <i class="el-icon-folder-opened" />&nbsp;组件
      </div>
      <div class="setting-buttons" @click="addColumn">
        <i class="el-icon-circle-plus-outline" />&nbsp;新增
      </div>
      <div class="setting-buttons" @click="delColumn">
        <i class="el-icon-circle-close" />&nbsp;删除
      </div>
    </div>
    <!--  操作栏结束  -->
    <div v-if="isShow === false" class="live-bos-column" :style="{ backgroundImage: 'url(' + nothing + ')'}" />
    <template-new v-if="isShow === true" :temp="temp" />
    <menu-temp-add ref="addTmp" @save="updateObject" />
  </div>
</template>

<style lang="scss" scoped>
.live-bos-item {
  width: 100%;
  height: 100%;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  position: relative;
}

.custom-setting-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-radius: 0 4px 0 4px;
  background-color: #0560be;
  color: #ffffff;
  display: none;
  text-align: center;
  z-index: 100;
}

.live-bos-item:hover .custom-setting-button {
  display: flex;
  flex-flow: row nowrap;
}

.setting-buttons {
  flex: 1 1;
  align-items: stretch;
  cursor: pointer;
  border-right: 1px solid #fff;
  font-size: 12px;
}

.live-bos-column {
  width: 100%;
  height: 100%;
  background: no-repeat center center;
  background-size: 80% 80%;
}

.setting-buttons:last-child {
  border-right: none;
}
</style>
